
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>表白墙 - 爱就大胆说出来</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" th:href="@{/res/layui/css/layui.css}">
  <link rel="stylesheet" th:href="@{/res/css/global.css}">
</head>
<body>

<div class="fly-header layui-bg-black" th:include="common/header.html :: head"></div>
<br>

<div class="layui-container fly-marginTop fly-user-main">
  <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
    <li class="layui-nav-item">
      <a th:href="@{/user/index}">
        <i class="layui-icon">&#xe612;</i>
        用户中心
      </a>
    </li>
    <li class="layui-nav-item">
      <a th:href="@{/user/set}">
        <i class="layui-icon">&#xe620;</i>
        基本设置
      </a>
    </li>
    <li class="layui-nav-item layui-this">
      <a href="">
        <i class="layui-icon">&#xe611;</i>
        我的消息
      </a>
    </li>
  </ul>

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>
  
  
  <div class="fly-panel fly-panel-user" pad20>
	  <div class="layui-tab layui-tab-brief" lay-filter="user" id="LAY_msg" style="margin-top: 15px;">
	    <button class="layui-btn layui-btn-danger" id="already_read" th:if="${not #lists.isEmpty(messageList)}">全部已读</button>
	    <div  id="LAY_minemsg" style="margin-top: 10px;">
        <div class="fly-none" th:if="${#lists.isEmpty(messageList)}">您暂时没有消息</div>
        <ul class="mine-msg" th:if="${not #lists.isEmpty(messageList)}" id="flag">
          <li data-id="123" th:each="message:${messageList}">
            <blockquote class="layui-elem-quote" th:if="${message.getSender()!=null}">
              <a th:href="@{/user/home/{uid}(uid=${message.getSender().getUserId()})}" target="_blank"><cite th:text="${message.getSender().getNickname()}"></cite></a>给您留言：
              <p th:text="${message.getMessageContent()}"></p>
            </blockquote>
            <blockquote class="layui-elem-quote" th:if="${message.getSender()==null}">
              系统消息：
              <p th:utext="${message.getMessageContent()}"></p>
            </blockquote>
            <p>
              <span th:text="${#dates.format(message.getMessageCreateTime(),'yyyy-MM-dd HH:mm')}"></span>
              <a th:href="@{/message/addMessage/{uid}(uid=${message.getSender().getUserId()})}" class="layui-btn layui-btn-small layui-btn-danger fly-delete" th:if="${message.getSender()!=null}">回复</a>
            </p>
          </li>
        </ul>
<!--          <div style="text-align: center" th:if="not ${#lists.isEmpty(messageList)}">-->
<!--            <div class="laypage-main" id="message-div" >-->
<!--              <a href="javascript:void(0);" id="more-message" class="laypage-first" title="查看更多" th:if="${session.pageUtil.isHasNextPage()}">查看更多</a>-->
<!--              <a href="javascript:void(0);" class="laypage-first" title="已经到底了" th:if="not ${session.pageUtil.isHasNextPage()}">已经到底了</a>-->
<!--            </div>-->
<!--          </div>-->

          <div style="text-align: center" id="message-div" th:if="not ${#lists.isEmpty(messageList)}">
            <button id="more-message" type="button" class="layui-btn layui-btn-primary" th:if="${session.pageUtil.isHasNextPage()}">查看更多</button>
            <button type="button" class="layui-btn layui-btn-primary" th:if="not ${session.pageUtil.isHasNextPage()}">已经到底了</button>
          </div>

          <br>

      </div>
	  </div>
	</div>

</div>

<div class="fly-footer" th:include="common/footer.html :: foot"></div>
<script th:src="@{/res/layui/layui.js}"></script>
<script>
  layui.cache.page = 'jie';
  layui.cache.user = {
    username: '游客'
    ,uid: -1
    ,avatar: '../../res/images/avatar/00.jpg'
    ,experience: 83
    ,sex: '男'
  };
  layui.config({
    version: "3.0.0"
    ,base: '../../res/mods/'
  }).extend({
    fly: 'index'
  }).use('fly');

  layui.use(['jquery'], function(){
    var $=layui.jquery;

    $("#already_read").click(function(){
      $.ajax({
        url:"/message/alreadyRead",
        method:"get",
        success:function(data){
          if (data.code === 0) {
            layer.msg("阅读成功");
            $("#message_count").remove();
            $("#message_count_badge").remove();
          }else if (data.code === 110) {
              layer.msg("服务器繁忙");
          }
        },
        error:function(data){
          layer.msg("服务器繁忙，请稍后再试");
        }
      });
    });

    /**
     *
     * 我前端学的贼差，原谅我写的狗屎代码
     *
     */
    $("#more-message").click(function(){
      $.ajax({
        url:"/message/moreMessage",
        method:"get",
        success:function(data){
          var moreMessage="";
          for (var temp in data.messageList){
            moreMessage+="<li>";
            if (data.messageList[temp].sender!=null){
              moreMessage+="<blockquote class=\"layui-elem-quote\">\n" +
                      "              <a href=\"/user/home/"+data.messageList[temp].sender.userId+"\" target=\"_blank\">" +
                      "               <cite>"+data.messageList[temp].sender.nickname+"</cite></a>给您留言：\n" +
                      "              <p>"+data.messageList[temp].messageContent+"</p>\n" +
                      "            </blockquote>";
            }else {
              moreMessage+="<blockquote class=\"layui-elem-quote\">\n" +
                      "              系统消息：\n" +
                      "              <p>"+data.messageList[temp].messageContent+"</p>\n" +
                      "            </blockquote>";
            }
            moreMessage+="<p>\n" +
                    "              <span>"+data.messageList[temp].messageCreateTime+"</span>\n";
            if (data.messageList[temp].sender!=null){
              moreMessage+="<a href=\"/message/addMessage/"+data.messageList[temp].sender.userId+"\" class=\"layui-btn layui-btn-small layui-btn-danger fly-delete\">回复</a>\n";
            }
            moreMessage+="            </p>";
            moreMessage+="</li>";
          }
          $("#flag").append(moreMessage);
          if (data.pageUtil.hasNextPage == false) {
            $("#more-message").remove();
            $("#message-div").append("<button type=\"button\" class=\"layui-btn layui-btn-primary\" >已经到底了</button>");
          }
        },
        error:function(data){
          layer.msg("服务器繁忙，请稍后再试");
        }
      });
    });
  });
</script>
</body>
</html>